<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件循环Event Loop</title>
</head>
<body>
    <button id="button" >点击</button>
    <script>
        //同步执行
        // function func1(){
        //     console.log(1)
        // }
        // function func2(){
        //     console.log(2)
        //     func1()
        //     console.log(3)
        // }
        // func2()
        /* 函数执行中，首先调用func2()所以执行栈中先存入func2()并打印结果为2；执行完毕func2()后
        代码顺序执行进行func1的执行并输出结果1；最后执行到func1（）调用函数并输出结果3
        */

        //主线程中带有异步
        // var p =new Promise(resolve =>{
        //     console.log(4)
        //     resolve(5)
        // })

        // function func1() {
        //     console.log(1)
        // }
        
        // function func2() {
        //     setTimeout(() =>{
        //         console.log(2)
        //     })
        //     func1()
        //     console.log(3)
        //     p.then(resolve =>{
        //         console.log(6)
        //     })
        // }
        // func2
        /* 
            代码片段中带有宏任务setTimeout 和微任务 Promise 代码在执行中会先将宏任务暂存在task中
            代码继续顺序执行，遇到微任务resolve执行并输出，当代码主进程执行完毕后，最后才会执行setTimeout中的代码
        */

        //案例：
        var btn = document.getElementById('button')
        btn.addEventListener('click',() => {
            Promise.resolve().then(() =>console.log(1))
            console.log('listener 1')
        })
        btn.addEventListener('click',() => {
            Promise.resolve().then(() => console.log(2))
            console.log('listener 2')
        })

        // 输出结果1：listener 1
        // 输出结果2： 1
        // 输出结果3：listener 2
        // 输出结果4： 2


        /* 有点击事件时，两个带有click会被带入事件循环中，进程会在第一个click执行结束后，才会执行
        第二个click直到代码全部结束。 
        */

        //案例演示2
        // var btn = document.getElementById('button')
        // btn.addEventListener('click',() => {
        //     Promise.resolve().then(() =>console.log(1))
        //     console.log('listener 1')
        // })
        // btn.addEventListener('click',() => {
        //     Promise.resolve().then(() => console.log(2))
        //     console.log('listener 2')
        // })
        // btn.click()
        // 案例修改后，由js触发代码会按自上而下顺序执行，代码会先执行主线任务，主线任务完成后才会进行异步任务
        /* 
        输出结果1：listener 1
        输出结果2：listener 2
        输出结果3：1
        输出结果4:2
        */ 
    </script>
</body>
</html>